<template>
  <div class="video">
    <div class="container">
      <div class="current-video-player">
        <img :src="detailData.cover" alt="" />
      </div>

      <div class="canplay-container">
        <img
          src="//rs.dance365.com/img/player_play@3x.0e7144c5.png"
          class="startplay"
        />
      </div>

      <div class="video-sub-container">
        <div class="count_and_icon">
          <div class="item">
            <span class="count_icon icon">播放量343</span>
          </div>
          <div class="item">
            <span class="count_icon icon">点赞量2</span>
          </div>
          <div class="item">
            <span class="count_icon icon">收藏数</span>
          </div>
          <div class="item">
            <span class="count_icon icon">音频</span>
          </div>
          <div class="item">
            <span class="count_icon icon">缓存</span>
          </div>
          <div class="item">
            <span class="count_icon icon">分享</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="detail-container">
      <div class="title">
        <div class="title-container">
          <p class="main-title">
            {{ detailData.title }}
          </p>
        </div>
        <div class="main-container">加入练习室</div>
      </div>

      <div class="main">
        <div class="avatar-name-container">
          <div class="creator">
            <div class="avatar"></div>
            <div class="text_area">
              <div class="first_line">
                <span class="uploaderName">{{
                  detailData.creatorBackup?.name
                }}</span>
                <span class="level">
                  <i class="lv"></i>
                  <i class="lv1"></i>
                  <i class="lv1"></i>
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="watch"><span style="font-weight: bold">+</span> 关注</div>

        <span class="light-time">发布时间：11-11</span>
      </div>
      <div class="type_list">
        <div class="space"></div>
        <div class="space">
          <span>原创作者：</span
          ><span class="type_item">{{
            detailData.momentClassificationBackup?.originAuthor
          }}</span>
        </div>
      </div>
      <div class="hobby_list">
        <span>兴趣技能：</span>
        <span class="hobby_item" v-for="item in detailData.tags" :key="item.id">
          {{ item.name }}、
        </span>
      </div>
    </div>
  </div>

  <div class="services" style="width: 1060px; margin-top: 20px">
    <div class="ask_item" v-for="item in detailData.requireBackup" :key="item">
      <div class="ask_btn">{{ item.requireDesc }}</div>
    </div>
  </div>

  <div class="pannel_wrapper">
    <div class="title">TA的相关</div>
    <div class="card_list">
      <div
        class="card_list_item"
        v-for="item in detailData.recommendMineBackup"
        :key="item.id"
      >
        <div class="related_suggestion">
          <div class="cover_wrap">
            <div class="cover" style="cursor: pointer">
              <div
                class="img"
                lazy="loaded"
                :style="{ backgroundImage: 'url(' + item.cover[0] + ')' }"
              ></div>
              <img
                src="//rs.dance365.com/img/release_play@3x.fb313c4d.png"
                alt="here is play btn icon"
                class="play_icon"
              />
            </div>
          </div>
          <div class="title">
            <a title="舞者" href="" class="panel_title">{{ item.title }}</a>
          </div>
          <div class="moment_detail">
            <span>
              <use xlink:href="#icon-details_browse"></use
              ><span
                style="
                  display: inline-block;
                  transform: translateY(-1px);
                  margin-left: 4px;
                "
              >
                {{ item.statisticsBackup.viewCount }}</span
              ></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="pannel_wrapper">
    <div class="title">更多推荐</div>
    <div class="card_list">
      <div
        class="card_list_item"
        v-for="item in detailData.recommendOtherBackup"
        :key="item.id"
      >
        <div class="related_suggestion">
          <div class="cover_wrap">
            <div class="cover" style="cursor: pointer">
              <div
                class="img"
                lazy="loaded"
                :style="{ backgroundImage: 'url(' + item.cover[0] + ')' }"
              ></div>
              <img
                src="//rs.dance365.com/img/release_play@3x.fb313c4d.png"
                alt="here is play btn icon"
                class="play_icon"
              />
            </div>
          </div>
          <div class="title">
            <a title="舞者" href="" class="panel_title">{{ item.title }}</a>
          </div>
          <div class="moment_detail">
            <span>
              <use xlink:href="#icon-details_browse"></use
              ><span
                style="
                  display: inline-block;
                  transform: translateY(-1px);
                  margin-left: 4px;
                "
              >
                {{ item.statisticsBackup.viewCount }}</span
              ></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="more-container" style="width: 1060px"></div>

  <div
    class="more-container radius4"
    style="
      background: rgb(255, 255, 255);
      padding: 0px 20px;
      box-sizing: border-box;
    "
  >
    <div dat class="page">
      <div class="comment_container">
        <div class="comment_box">
          <div
            class="head"
            style="
              cursor: pointer;
              background-image: url('https://rs.dance365.com/extract/user/avatar/25309caa2b9444a43e4e7e137e297622?imageView2/0/w/200/h/100/format/webp/ignore-error/1');
            "
            data-src="https://rs.dance365.com/extract/user/avatar/25309caa2b9444a43e4e7e137e297622?imageView2/0/w/200/h/100/format/webp/ignore-error/1"
            lazy="loaded"
          ></div>
          <div class="comment_area">
            <textarea
              name=""
              id=""
              cols="30"
              placeholder="说点什么吧～"
            ></textarea>
          </div>
        </div>

        <div class="comment_list_container">
          <div class="title">留言（1）</div>
          <ul class="comment_list">
            <li>
              <div
                class="head"
                data-src="https://rs.dance365.com/photo/bf60beea69234b829e4d765b42f5421a_rs_f65d98a486574ee8ab77df3d77400506?imageView2/0/w/200/h/100/format/webp/ignore-error/1"
                lazy="loaded"
                style="
                  background-image: url('https://rs.dance365.com/photo/bf60beea69234b829e4d765b42f5421a_rs_f65d98a486574ee8ab77df3d77400506?imageView2/0/w/200/h/100/format/webp/ignore-error/1');
                "
              ></div>
              <div class="detail">
                <div class="origin_comment">
                  <div class="name">
                    <span>
                      小白兔
                      <span class="level_box small" style="margin-left: 6px"
                        ><i data-v-3f436a2c="" class="lv"></i
                        ><i data-v-3f436a2c="" class="lv1"></i
                        ><i data-v-3f436a2c="" class="lv0"></i></span></span
                    ><span class="time">11-13</span>
                  </div>
                  <div class="operate">
                    <div class="count_and_icon">
                      <div class="item">
                        <span class="count_icon"></span><span>0</span>
                      </div>
                    </div>
                  </div>
                </div>
                <pre class="comment_content">这是一条留言</pre>
              </div>
            </li>
          </ul>
        </div>
        <div class="load_more">加载更多</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Video",
});
</script>

<script setup lang="ts">
import { requestSingleVideo } from "@/api/detail/api";
import { onMounted, ref } from "vue";
import type { Data } from "@/api/detail/interface";
//视频详情数据
const detailData = ref<any>({});

onMounted(async () => {
  const result = await requestSingleVideo();
  detailData.value = result;
  console.log("detailData:", detailData.value.relevancyAvocations);
  console.log("result:", result);
});
</script>

<style scoped lang="less">
.video {
  width: 100%;
  background-color: #1e1e1e;
  .container {
    background-color: #000;
    margin-top: 0;
    text-align: center;
    .current-video-player {
      width: 1060px;
      img {
        height: 505px;
      }
    }
    .canplay-container {
      user-select: none;
      line-height: 1;
      white-space: normal;
      text-indent: 0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      cursor: pointer;
      .startplay {
        user-select: none;
        line-height: 1;
        white-space: normal;
        text-indent: 0;
        cursor: pointer;
        border-style: none;
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .video-sub-container {
      padding: 18px 20px;
      background-color: #121212;
      .count_and_icon {
        display: flex;
        justify-content: space-around;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
        margin-right: 50px;
        .item {
          font-size: 14px;
          text-align: center;
          color: #7d8090;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          cursor: default;
        }
      }
    }
  }
}
.container {
  width: 1060px;
  .detail-container {
    padding: 20px 30px 30px 30px;
    background: #fff;
    box-sizing: border-box;
    .title {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      .title-container {
        width: 900px;
        .main-title {
          color: #111;
          font-size: 20px;
          margin: 0;
        }
      }
      .main-container {
        width: 106px;
        height: 40px;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
        color: #f93684;
        border: 1px solid #f93684;
        cursor: pointer;
      }
    }
    .main {
      padding: 19px 0 0;
      .avatar-name-container {
        display: inline-block;
        margin-right: 25px;
        vertical-align: middle;
        .creator {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          text-decoration: none;
          cursor: pointer;
          .avatar {
            cursor: pointer;
            width: 40px !important;
            height: 40px !important;
            position: relative;
            flex-shrink: 0;
            border-radius: 50%;
            margin-right: 9px;
            background-size: cover;
            background-position: 50%;
            background-image: url("https://rs.dance365.com/photo/d4bc1661d71b4d71bc56c383292eda43_rs_a6608c2a716c4091a78b765d0bc9e7c2.jpg");
          }
          .text_area {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            .first_line {
              display: flex;
              align-items: center;
              .uploaderName {
                cursor: pointer;
                width: auto !important;
                max-width: 130px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                line-height: 1.3;
                font-size: 16px;
                color: #111;
              }
              .level {
                box-sizing: border-box;
                background: linear-gradient(#ff289b, #ff43d0);
                border: 1px solid #fff;
                border-radius: 4px;
                padding: 0 8px;
                display: inline-block !important;
                line-height: 1.15;
                white-space: nowrap;
                cursor: pointer;
                margin-left: 6px;
                .lv {
                  line-height: 1.15;
                  white-space: nowrap;
                  cursor: pointer;
                  display: inline-block;
                  background-size: 100%;
                  background-repeat: no-repeat;
                  width: 15px;
                  height: 10px;
                  background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
                }
                .lv1 {
                  line-height: 1.15;
                  white-space: nowrap;
                  cursor: pointer;
                  background-image: url(https://rs.dance365.com/level_num_1@3x.png);
                  width: 8px;
                  height: 10px;
                  display: inline-block;
                  background-size: 100%;
                  background-repeat: no-repeat;
                }
                .lv0 {
                  line-height: 1.15;
                  white-space: nowrap;
                  cursor: pointer;
                  background-image: url(https://rs.dance365.com/level_num_0@3x.png);
                  width: 8px;
                  height: 10px;
                  display: inline-block;
                  background-size: 100%;
                  background-repeat: no-repeat;
                }
              }
            }
          }
        }
      }

      .watch {
        position: relative;
        color: #f93684;
        background-color: #f9ebf1;
        border-radius: 20px;
        font-size: 14px;
        text-align: center;
        padding: 10px 0;
        border: 1px solid #f9ebf1;
        width: 86px;
        display: inline-block;
        cursor: pointer;
      }

      .light-time {
        color: #b1b5c1;
        vertical-align: middle;
        float: right;
        margin-top: 13px;
      }
    }
    .type_list {
      color: #111;
      font-size: 16px;
      margin-top: 20px;
      margin-bottom: -10px;
      .space {
        color: #111;
        font-size: 16px;
        margin-top: 5px;
        line-height: 24px;
        .type_item {
          font-size: 16px;
          line-height: 24px;
          color: #f93684;
        }
      }
    }
    .hobby_list {
      color: #333;
      font-size: 16px;
      margin-top: 20px;
      .hobby_item {
        font-size: 16px;
        cursor: pointer;
        color: #f93684;
      }
    }
  }
}

.services {
  box-sizing: border-box;
  background: #fff;
  height: 70px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  .ask_item {
    cursor: pointer;
    user-select: none;
    .ask_btn {
      user-select: none;
      position: relative;
      font-size: 14px;
      padding: 0 15px;
      height: 36px;
      line-height: 36px;
      margin-right: 40px;
      background: #ffeaf2;
      border-radius: 20px;
      font-weight: 400;
      color: #111;
      cursor: pointer;
    }
  }
}

.pannel_wrapper {
  background-color: transparent;
  padding-top: 23px;
  padding-bottom: 30px;
  border-radius: 4px;
  width: 1020px;
  margin: 0 auto;
  .title {
    padding-bottom: 23px;
    color: #111;
    font-size: 24px;
  }
  .card_list {
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    .card_list_item {
      margin-right: 20px;
      .related_suggestion {
        .cover_wrap {
          .cover {
            width: 240px;
            height: 134px;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            .img {
              cursor: pointer;
              width: 100%;
              height: 100%;
              background-position: 50%;
              background-size: cover;
              background-image: url("https://rs.dance365.com/photo/5b149039a99b400585a9ec648450e9ee_rs_583e4fc8444b4150974883c33f79feda?imageView2/0/w/300/h/1200/format/webp/ignore-error/1");
            }
            .play_icon {
              cursor: pointer;
              border-style: none;
              position: absolute;
              bottom: 6px;
              left: 10px;
              width: 30px;
              height: 30px;
            }
          }
        }
        .title {
          width: 240px;
          padding: 10px 0;
          .panel_title {
            background-color: transparent;
            color: inherit;
            text-decoration: none;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            font-size: 16px;
          }
        }
        .moment_detail {
          span {
            color: #7d8090;
            font-size: 14px;
            display: inline-block;
            transform: translateY(-1px);
            margin-left: 4px;
          }
        }
      }
    }
  }
}

.more-container {
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  margin: 20px auto 0;
  width: 1060px;
  border-radius: 4px;
  .page {
    .comment_container {
      background: #fff;
      padding: 30px 0;
      box-sizing: border-box;
    }
    .comment_box {
      box-sizing: border-box;
      display: flex;
      margin-bottom: 10px;
      .head {
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        margin-right: 10px;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        cursor: pointer;
        background-image: url("https://rs.dance365.com/extract/user/avatar/25309caa2b9444a43e4e7e137e297622?imageView2/0/w/200/h/100/format/webp/ignore-error/1");
      }
      .comment_area {
        box-sizing: border-box;
        flex: 1;
        min-height: 80px;
        border-radius: 4px;
        textarea {
          margin: 0;
          overflow: auto;
          box-sizing: border-box;
          width: 100%;
          padding: 15px 20px;
          resize: none;
          border-radius: 2px;
          font-size: 14px;
          border: none;
          background: #f5f7f9;
          outline: none;
        }
      }
    }

    .comment_list_container {
      box-sizing: border-box;
      .title {
        box-sizing: border-box;
        font-size: 24px;
        color: #111;
        line-height: 40px;
        border-bottom: 1px solid #eaecf0;
        padding-bottom: 15px;
      }
      .comment_list {
        box-sizing: border-box;
        padding-left: 0;
        li {
          box-sizing: border-box;
          list-style: none;
          padding: 20px 0;
          display: flex;
          border-bottom: 1px solid #eaecf0;
          .head {
            list-style: none;
            box-sizing: border-box;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 10px;
            background-size: cover;
            background-position: 50%;
            background-repeat: no-repeat;
            cursor: pointer;
            background-image: url("https://rs.dance365.com/photo/bf60beea69234b829e4d765b42f5421a_rs_f65d98a486574ee8ab77df3d77400506?imageView2/0/w/200/h/100/format/webp/ignore-error/1");
          }
          .detail {
            list-style: none;
            box-sizing: border-box;
            flex: 1;
            overflow: hidden;
            .origin_comment {
              list-style: none;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              height: 50px;
              .name {
                list-style: none;
                box-sizing: border-box;
                flex: 1;
                font-size: 14px;
                .time {
                  list-style: none;
                  box-sizing: border-box;
                  display: block;
                  color: #b1b5c1;
                  font-size: 12px;
                  line-height: 20px;
                }
              }
              .level_box {
                box-sizing: border-box;
                background: linear-gradient(#ff289b, #ff43d0);
                border: 1px solid #fff;
                border-radius: 4px;
                padding: 0 8px;
                display: inline-block !important;
                line-height: 1.15;
                white-space: nowrap;
                cursor: pointer;
                margin-left: 6px;
                .lv {
                  line-height: 1.15;
                  white-space: nowrap;
                  cursor: pointer;
                  display: inline-block;
                  background-size: 100%;
                  background-repeat: no-repeat;
                  width: 15px;
                  height: 10px;
                  background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
                }
                .lv1 {
                  line-height: 1.15;
                  white-space: nowrap;
                  cursor: pointer;
                  background-image: url(https://rs.dance365.com/level_num_1@3x.png);
                  width: 8px;
                  height: 10px;
                  display: inline-block;
                  background-size: 100%;
                  background-repeat: no-repeat;
                }
              }

              .operate {
                list-style: none;
                box-sizing: border-box;
                .count_and_icon {
                  list-style: none;
                  box-sizing: border-box;
                  display: inline-block;
                  font-size: 14px;
                  cursor: pointer;
                  text-align: center;
                  min-width: 20px;
                  margin-right: 80px;
                  .item {
                    list-style: none;
                    font-size: 14px;
                    cursor: pointer;
                    text-align: center;
                    color: #7d8090;
                    display: flex;
                    align-items: center;
                    .count_icon {
                      font-size: 14px;
                      cursor: pointer;
                      text-align: center;
                      color: #7d8090;
                      display: inline-block;
                      margin-right: 6px;
                      background: url();
                      background-size: 100% 100%;
                      width: 16px;
                      height: 16px;
                    }
                  }
                }
              }
            }
            .comment_content {
              font-size: 14px;
              margin: 0;
              white-space: pre-wrap;
              word-wrap: break-word;
              overflow: hidden;
              line-height: 24px;
            }
          }
        }
      }
    }
    .load_more {
      box-sizing: border-box;
      width: 140px;
      height: 40px;
      color: #82858e;
      margin: 20px auto;
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #eaecf0;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>
